<template>
    <div class="header">
        <h3>我的错题本</h3>
        <p>记录和反思学习中的错误，从错误中学习，进而显著提高数学 解题能力和深度理解数学概念的能力。</p>
    </div>
    <van-list>
        <div @click="gotoVideoHandler(item.type_id,item.id)" v-if="list.length > 0" class="item" v-for="(item, index) in list"
            :key="index" :title="item">
            <div class="num">
                <span class="iconfont icon-shipin"></span>
            </div>
            <div class="info">
                <p class="title">{{ item.title }}</p>
                <div class="info-details">
                    <div class="video">{{ item.n_title }}</div>
                    <div class="time"> - {{ item.t_title }}</div>
                </div>
            </div>
        </div>
    </van-list>
    <div v-if="list.length <= 0" class="collect-no">
        <img src="../assets/imgs/wrongNo.png" alt="">
        <p>暂无错题</p>
    </div>
</template>
<script setup>

import { ref, onMounted } from 'vue';
import api from "../api"
import md5 from "js-md5"
import { useRouter } from 'vue-router'

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const type = ref(2)
const userid = ref("")
const router = useRouter()

onMounted(() => {
    userid.value = sessionStorage.getItem("user")
})

onMounted(() => {
    api.getCollectOrWrong({
        type: type.value,
        userid: userid.value,
        verify: md5(type.value + userid.value)
    }).then(res => {
        if (res.data.code == 400) {
            finished.value = true;
        }
        if (res.data.code === 200) {
            list.value = list.value.concat(res.data.data)
        }
    })
})

function gotoVideoHandler(chapterID,courseID) {
    router.push({ name: "video", params: { id:chapterID, courseID,type:'wrong'} })
}

</script>
<style scoped>
.header {
    width: 100%;
    height: 150px;
    background-image: url("../assets/imgs/wrong-bg.png");
    background-size: cover;
}

.header h3 {
    font-size: 20px;
    color: #594094;
    text-align: center;
    padding-top: 40px;
}

.header p {
    font-size: 13px;
    width: 80%;
    margin: 0 auto;
    color: #594094;
    text-align: center;
    margin-top: 10px;
}

.item {
    margin: 15px;
    padding: 15px;
    background: #F6F7F8;
    overflow: hidden;
    clear: both;
    color: #333333;
}

.van-list{
    margin-bottom: 60px;
}


.item .num {
    float: left;
    width: 5%;
    font-size: 16px;
}

.item .info {
    width: 92%;
    float: right;
    font-size: 16px;
}

.info-details {
    overflow: hidden;
    clear: both;
    margin-top: 10px;
}

.info-details div {
    float: left;
    font-size: 13px;
}

.info-details div span {
    font-size: 13px;
}

.collect-no {
    margin-top: 100px;
}

.collect-no img {
    display: block;
    width: 30%;
    margin: 0 auto;
}

.collect-no p {
    color: #AEB8C2;
    text-align: center;
}
</style>